<template>
    <div class="flex-col-center page-open-in-app">
        <van-image
            :src="LOGO"
            class="logo"
            fit="contain" />
        <div
            :style="$langDirection"
            class="tip tip-title">
            {{ $t('openInApp.text1') }}
        </div>
        <div
            :style="$langDirection"
            class="tip">
            {{ $t('openInApp.text2') }}
        </div>
    </div>
</template>

<script setup>
    import { inject, ref } from 'vue';

    const LOGO = ref('');
    import('@img/logo.png').then((path) => {
        LOGO.value = path['default'];
    });
    const $langDirection = inject('$langDirection');
</script>

<style lang="scss" scoped>
    .page-open-in-app {
        min-height: 100vh;
        color: #ffffff;
        background: linear-gradient(45deg, #169d64, #5ff755);
    }

    .logo {
        width: 25vw;
        height: 25vw;
    }

    .tip {
        margin: pxToVw(8) 0;
        padding: 0 pxToVw(32);
        font-size: 0.35rem;
        color: #dddddd;
        text-align: center;
    }

    .tip-title {
        font-size: 0.5rem;
        color: #ffffff;
    }
</style>
